<script setup>
import {ref, useTemplateRef} from 'vue';
import SvgIcon from "@/components/SvgIcon/index.vue";

const props = defineProps({
  // 是否为嵌套菜单项
  icon: {},
  // 当前菜单层级
  title: {},
  // 侧边栏是否折叠
  className: {},
  // 菜单模式（垂直/水平）
  collapse: {},
  // 菜单项数据对象（必须）
  mode: {},
});
const showTextTooltip = ref(null);
const sidebarItemTextRef = useTemplateRef('sidebar-item-text-ref');

const onTextMove = () => {
  if (showTextTooltip.value !== null || props.mode === 'horizontal') return;
  const sidebarItemTextDom = sidebarItemTextRef.value?.children?.[0];
  showTextTooltip.value = sidebarItemTextDom
      ? sidebarItemTextDom.scrollWidth > sidebarItemTextDom.clientWidth
      : false;
};
</script>

<template>
  <!-- 菜单项文本容器 -->
<!--  <SvgIcon v-if="props.icon" :class-name="props.className" :name="props.icon"/>-->
  <div
      @mouseover="onTextMove"
      ref="sidebar-item-text-ref"
      class="menu-item-text"
      :class="[
      !props.icon && 'menu-item-text-only', // 没有图标时的样式
      props.mode === 'vertical' && 'sidebar-menu-item-text', // 垂直布局时的样式
    ]"
  >
    <!-- 文本内容，超出显示省略号并有tooltip提示 -->
    <el-tooltip content="123" :disabled="!showTextTooltip || props.collapse" placement="top">
      <el-text truncated>
        {{ props.title }}
      </el-text>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-menu-item-text {
  flex: 1;
  width: 0;
}

.menu-item-text {
  color: currentcolor;

  .el-text {
    color: currentcolor;
  }
}
</style>
